// src/hooks/useEchart.ts
import { onActivated, onDeactivated, onBeforeUnmount, onMounted } from "vue";
import type { Ref } from "vue";
import * as echarts from "echarts";
// 为了更精确的类型提示，可以从 echarts 引入 EChartsOption 类型
import type { EChartsOption } from "echarts";

/**
 * @description 使用 Echarts
 * @param {Ref<HTMLElement | undefined>} elementRef Echarts 挂载的 DOM 元素
 * @param {EChartsOption} options Echarts 配置项
 * */
export const useEcharts = (elementRef: Ref<HTMLElement | undefined>, options: EChartsOption) => {
	// ECharts 实例
	let myChart: echarts.ECharts | null = null;

	// ECharts 重绘函数
	const echartsResize = () => {
		// myChart 可能还未初始化，使用可选链 ?.
		myChart?.resize();
	};

	// 初始化图表
	const initChart = () => {
		if (!elementRef.value) return;
		// 初始化 ECharts 实例
		// myChart = echarts.init(elementRef.value ,undefined , {renderer:'canvas'});
		myChart = echarts.init(elementRef.value);
		// 设置配置项
		if (options && typeof options === "object") {
			myChart.setOption(options);
		}
		// 监听窗口大小变化
		window.addEventListener("resize", echartsResize);
	};

	// onMounted 生命周期，在 DOM 挂载后初始化图表
	onMounted(() => {
		initChart();
	});

	// onActivated 生命周期 (用于 <keep-alive> 组件)
	// 当组件被激活时，重新监听 resize 事件
	onActivated(() => {
		window.addEventListener("resize", echartsResize);
	});

	// onDeactivated 生命周期 (用于 <keep-alive> 组件)
	// 当组件被停用时，移除 resize 事件监听，以优化性能
	onDeactivated(() => {
		window.removeEventListener("resize", echartsResize);
	});

	// onBeforeUnmount 生命周期
	// 在组件卸载前，销毁 ECharts 实例并移除事件监听
	onBeforeUnmount(() => {
		window.removeEventListener("resize", echartsResize);
		// 销毁实例，释放资源
		myChart?.dispose();
	});

    // 如果需要，可以返回 chart 实例或一些方法
    // return {
    //   myChart
    // }
};
